<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串驼峰转换</title>
    <link rel="stylesheet" href="css/index.css" />
	<style>
		.form-content .form-line label:first-child{
			width: 60px;
		}
		body{
			width: 80%;
		}
	</style>
</head>
<body>
    <form style="margin-top: 40px;">
		<h1 class="form-title">字符串驼峰转换</h1>
        <div class="form-content">
            <div class="form-line">
                <label>字符串</label>
               <input type="text" id="test_str">
            </div>
			<div class="form-line">
			    <label>转换后</label>
			   <input type="text" id="trans_str">
			</div>
		</div>
    </form>
    <script type="application/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script>
		$("#test_str").on({
			"keydown":function(){
				console.log("keydown");
				changeStr(this.value);
			},
			"keyup":function(){
				console.log("keyup");
				changeStr(this.value);
			},
			"change": function(){
				console.log("change");
				changeStr(this.value);
			}
		});
		
		function changeStr(value){
			if(value){
				var strs = value.split("_");
				var str = "";
				for(var i=0;i<strs.length;i++){
					if(i==0){
						str = strs[i].toLowerCase();
					}else{
						str+= toUpperCaseFirstOne(strs[i].toLowerCase())
					}
				}
				$("#trans_str").val(str);
			}else{
				$("#trans_str").val("");
			}
		}
		
		function toUpperCaseFirstOne(str){
			return str.substring(0,1).toUpperCase()+ str.substring(1)
		}
    </script>
</body>
</html>